<template>
  <div>
    <div class="provider-list">
      <div class="header">
        <div class="header-line1 flex-s">
          <el-button type="primary" @click="onOperation({}, 'add')"
            ><el-icon style="margin-right: 2px"><Plus /></el-icon
            >新建</el-button
          >
        </div>
        <div class="header-line2 flex-s">
          <el-col :span="6">
            <el-date-picker
              type="daterange"
              range-separator="To"
              v-model="dateRange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="large"
              prefix-icon="Calendar"
              value-format="YYYY-MM-DD"
              @change="changeTime"
            />
          </el-col>
          <el-select
            width="240"
            show-border
            v-model="state.params.weizhi"
            class="ml20"
            @change="selectPosition"
            size="large"
            clearable
            placeholder="位置"
          >
            <el-option
              v-for="item in state.positions"
              :key="item.dicValue"
              :label="item.dicLabel"
              :value="item.dicValue"
            >
              {{ item.dicLabel }}
            </el-option>
          </el-select>
          <el-select
            width="240"
            show-border
            v-model="state.params.gongnengmokuai"
            @change="GetList"
            class="ml20"
            size="large"
            clearable
            placeholder="功能模块"
          >
            <el-option
              v-for="item in state.modules"
              :key="item.dicValue"
              :label="item.dicLabel"
              :value="item.dicValue"
            >
              {{ item.dicLabel }}
            </el-option>
          </el-select>
          <el-select
            width="240"
            show-border
            v-model="state.params.leixing"
            @change="GetList"
            class="ml20"
            size="large"
            placeholder="类型"
            clearable
          >
            <el-option
              v-for="item in state.type"
              :key="item.dicValue"
              :label="item.dicLabel"
              :value="item.dicValue"
            >
              {{ item.dicLabel }}
            </el-option>
          </el-select>
          <el-select
            width="150"
            show-border
            v-model="state.params.shangjia"
            size="large"
            class="ml20"
            placeholder="状态"
            clearable
            @change="GetList"
          >
            <el-option
              v-for="item in state.status"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
              {{ item.name }}
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="content content-table">
        <el-table
          ref="multipleTableRef"
          border
          :data="state.list"
          style="width: calc(100% - 20px)"
        >
          <el-table-column
            property="bannermingcheng"
            label="banner名称"
            align="center"
          />
          <el-table-column width="200" label="图片" align="center">
            <template #default="scope">
              <img
                style="max-width: 180px"
                v-if="scope.row.bannertu && scope.row.bannertu.length"
                :src="scope.row.bannertu[0].filePath"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column property="weizhi" label="位置" align="center" />
          <el-table-column
            property="gongnengmokuai"
            label="功能模块"
            align="center"
          />
          <el-table-column
            property="leixing"
            label="类型"
            width="70"
            align="center"
          />
          <el-table-column
            property="bannerjieshao"
            label="banner介绍"
            width="300"
            align="center"
          />
          <el-table-column width="100" label="状态" align="center">
            <template #default="scope">
              <span>{{
                scope.row.shangjia.code == 0 ? "已下架" : "已上架"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            property="createTime"
            label="创建时间"
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="150"
            align="center"
          >
            <template #default="scope">
              <el-button
                style="min-width: auto"
                link
                type="primary"
                size="small"
                @click.prevent="onOperation(scope.row, 'edit')"
                >编辑</el-button
              >
              <el-button
                style="min-width: auto"
                link
                type="primary"
                size="small"
                @click.prevent="changeStatus(scope.row)"
                >{{ scope.row.shangjia.code == 0 ? "上架" : "下架" }}</el-button
              >
              <el-button
                style="min-width: auto"
                link
                type="primary"
                size="small"
                @click.prevent="onOperation(scope.row, 'delete')"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <h-page
          v-if="state.total"
          v-model:curr-page="state.params.current"
          :size="state.params.size"
          :total="state.total"
          @change="GetList"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, watch, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetBannerList, ChangeBannerStatus, DeleteBanner } from "@/api/banner";
import { baseMsg, elMessageTip } from "@/utils/utils";
import { GetDictionary, GetDictionaryTree } from "@/api/system";
const route = useRoute();
const router = useRouter();
const dateRange = ref("");
const state = reactive({
  params: {
    current: Number(route.query.page) || 1,
    size: Number(route.query.size) || 10,
    shangjia: "",
    kaishiriqi: "",
    jieshuriqi: "",
    gongnengmokuai: "",
    weizhi: "",
    leixing: "",
  },
  // 状态下拉
  status: [
    {
      name: "已上架",
      value: 1,
    },
    {
      name: "未上架",
      value: 0,
    },
  ],
  // 位置下拉
  positions: [],
  // 功能模块下拉
  modules: [],
  // 类型下拉
  type: [],
  list: [],
  total: 0,
  // 时间选择器时间
  chooseTime: [],
});
const init = () => {
  // 查询位置下拉
  GetDictionaryTree({ dicModel: "bannerweizhi" }).then((res) => {
    if (res.code == 4201) {
      state.positions = res.data;
    }
  });
  GetDictionaryTree({ dicModel: "bannerleixing" }).then((res) => {
    if (res.code == 4201) {
      state.type = res.data;
    }
  });
  GetList();
};
// 选择位置下拉数据变化时
const selectPosition = () => {
  state.params.gongnengmokuai = "";
  state.modules = [];
  if (state.params.weizhi) {
    GetDictionary({ dicId: state.params.weizhi }).then((res) => {
      if (res.code == 4201) {
        state.modules = res.data;
      }
    });
    state.loading = false;
  } else {
    state.loading = false;
  }
};
const GetList = async () => {
  const res = await GetBannerList(state.params);
  state.list = res.data.records;
  state.total = res.data.total;
};
// 操作
const onOperation = (params, operation) => {
  if (operation === "delete") {
    elMessageTip({
      ok() {
        DeleteBanner({
          id: params.id,
        }).then((res) => {
          if (res.code == 4201 || res.code == 4202) {
            baseMsg("删除成功");
            GetList();
          }
        });
      },
    });
  }
  if (operation === "add" || operation === "edit") {
    router.push({
      path: `/banner/info`,
      query: {
        id: params.id || null,
        type: operation,
      },
    });
  }
};
// 时间选择
const changeTime = (value) => {
  if (value) {
    state.params.kaishiriqi = value[0];
    state.params.jieshuriqi = value[1];
  } else {
    state.params.kaishiriqi = "";
    state.params.jieshuriqi = "";
  }
  GetList();
};
// 上下架
const changeStatus = async (value) => {
  const res = await ChangeBannerStatus({ id: value.id });
  if (res.code === 4202) {
    baseMsg("操作成功");
    GetList();
  }
};
watch(
  () => route.query,
  () => {
    state.params.current = Number(route.query.page) || 1;
    GetList();
  },
  { deep: true }
);
init();
</script>
<style lang="scss" scoped>
.header {
  border-bottom: 10px solid #f2f2f2;
  border-radius: 10px 10px 0 0;
}
.header-line1 {
  padding: 20px 10px;
  border-bottom: 1px solid #ccc;
  border-radius: 10px 10px 0 0;
}
.header-line2 {
  padding: 20px 10px;
}
.content {
  border: none !important;
  margin: 20px 10px;
  background-color: transparent !important;
}
.content-table {
  padding-bottom: 30px;
}
</style>
<style lang="scss">
.content-table .el-table__header th {
  background-color: #f2f9fc !important;
}
.note-button-group {
  .el-form-item__content {
    justify-content: center;
  }
}
</style>
